<template>
	<view class="order _width">
		<!-- 收货地址 -->
		<view class="card address _width" v-if="addressListData.length == 0">
			<text class="label _width">收货人信息</text>
			<view class="isNullAddress _width flex" @click="addAddress">
				<text class="label">暂无收货地址，点击创建</text>
				<image src="https://img.zhizhuangtong.com/project_media/img/xcx/rightTag.png" />
			</view>
		</view>
		<view class="card address _width" v-if="addressListData.length != 0">
			<view class="AddressList _width flex" @click="addAddress">
				<view class="left">
					<view class="label1 dian1">
						{{addressListData[0]?.province_name}}&nbsp;{{addressListData[0]?.city_name}}&nbsp;{{addressListData[0]?.county_name}}
					</view>
					<view class="label2  dian2">{{addressListData[0]?.address}}</view>
					<text
						class="label3 block">{{addressListData[0]?.consignee}}&nbsp;{{addressListData[0]?.mobile}}</text>
				</view>
				<view class="right">
					<image src="https://img.zhizhuangtong.com/project_media/img/xcx/rightTag.png" />
				</view>
			</view>
		</view>

		<!-- 商家信息 -->
		<view class="card merchant flex _width" v-for="(item,index) in order.list" :key="index">
			<view class="title _width flex">
				<image src="https://img.zhizhuangtong.com/project_media/img/xcx/merchant.png" class="icon" />
				<view class="right">
					<text class="label dian">{{item.company_name}}</text>
					<!-- <image src="https://img.zhizhuangtong.com/project_media/img/xcx/rightTag.png" class="tag" /> -->
				</view>
			</view>


			<view class="goodsInfo  _width flex" v-for="(items,indexs) in item.goods" :key="indexs">
				<image :src="items.img" class="cover" />
				<view class="right">
					<view class="title _width flex">
						<text class="name dian">{{items.sku_name}}</text>
						<!-- <text class="monery">¥&nbsp;{{items.price}}</text> -->
					</view>
					<view class="size _width flex">
						尺寸：{{items.size}}
					</view>
					
					<view class="bottom">
						<view class="leftRow"> 
							<!-- <text class="monery">¥&nbsp;{{items.price}}</text> -->
							
							<!-- 有优惠 -->
							<view class="monery1" v-if="items.activity_id">
								<view class="col1">
									<text class="price">¥{{items.subsidy_price}}</text>
									<text class="pricetype">到手价</text>
								</view>
								<text class="price2">¥{{ items.money }}</text>
							</view>
							<!-- 没有优惠 -->
							<view class="monery" v-else>
								¥{{ items.price }}
							</view>
							
							
						</view>
						<view class="number _width flex">
							x{{items.num}}
						</view>
						
					</view>
					
				</view>
			</view>

			<view class="menu  _width flex">
				<text class="leftLabel">配送</text>
				<view class="right flex">
					<view class="titles _width flex">
						<view class="delivery _width dian">商家配送</view>
						<!-- <view class="date _width">预计明天11月21日 24:00前发货</view> -->
					</view>
					<!-- <image src="https://img.zhizhuangtong.com/project_media/img/xcx/rightTag.png" class="tag" /> -->
				</view>
			</view>

			<!-- 			<view class="menu  _width flex">
				<text class="leftLabel">备注</text>
				<view class="right flex">
					<view class="titles _width flex" @click="Masker">
						<view class="tips _width">建议留言前，先与商家沟通确认</view>
					</view>
					<image src="https://img.zhizhuangtong.com/project_media/img/xcx/rightTag.png" class="tag" />

				</view>
			</view> -->

		</view>


		<!-- 发票信息 -->
		<view class="card invoice _width flex">
			<view class="leftLabel">发票信息</view>
			<view class="right flex" @click="onInvalid">
				<view class="titles _width flex">
					<view class="monery _width flex" v-if="invoice_type == 0">不开发票
					</view>
					<view class="monery _width flex" v-if="invoice_type != 0 ">
						普通发票 &nbsp; {{ invoice_type == 1 ? '个人' : '公司'}}
					</view>
				</view>
				<image src="https://img.zhizhuangtong.com/project_media/img/xcx/rightTag.png" class="tag" />
			</view>
		</view>

		<!-- 订单信息 -->
		<view class="card orderInfo _width flex">
			<view class="menu  _width flex">
				<text class="leftLabel1">商品金额</text>
				<view class="right flex">
					<view class="titles _width flex">
						<view class="monery1 _width flex">
							¥&nbsp;{{order.goods_money}}</view>
					</view>
				</view>
			</view>
			
			<view class="menu  _width flex">
				<text class="leftLabel">运费</text>
				<view class="right flex">
					<view class="titles _width flex">
						<view class="monery _width flex">&nbsp;
							¥ {{order.postage}}</view>
					</view>
				</view>
			</view>
			
			<view class="menu  _width flex">
				<text class="leftLabel">平台补贴</text>
				<view class="right flex">
					<view class="titles _width flex">
						<view class="monery _width flex">&nbsp;
							¥ {{order.subsidy_money}}</view>
					</view>
				</view>
			</view>
			

		<!-- 	<view class="menu  _width flex">
				<text class="leftLabel">运费</text>
				<view class="right flex">
					<view class="titles _width flex">
						<view class="monery _width flex">&nbsp;
							¥ {{order.postage}}</view>
					</view>
				</view>
			</view> -->

			<view class="menu  _width flex">
				<text class="leftLabel">优惠券</text>
				<view class="right flex">
					<view class="titles _width flex">
						<view class="monery _width flex">&nbsp;
							¥ 0</view>
					</view>
				</view>
			</view>

			<view class="menu totalRow _width flex">
				<view class="rows">
					<view class="total flex ">共减</view>
					<view class="totalMonery  flex">&nbsp;¥&nbsp;{{order.subsidy_money}}</view>
				</view>
				<view class="rows">
					<view class="total flex ">应付金额</view>
					<view class="totalMonery  flex">&nbsp;¥&nbsp;{{order.need_pay}}</view>
				</view>
				
			</view>
		</view>


		<!-- 填写备注 -->
		<!-- 		<up-popup v-model:show="showModal" closeable="true">
			<view class="maskerRow">
				<text class="label">备注填写</text>
				<up-textarea v-model="masker" placeholder="请输入备注" clearable maxlength="200"></up-textarea>

				<view class="btn">
					<button @click="saveMasker">确定</button>
				</view>
			</view>
		</up-popup> -->


		<!-- 底部按钮 -->
		<view class="bottomFexBtn">
			<view class="rowConter">

				<view class="row">
					<view class="price" @click="nullClick">
						<text>¥&nbsp;{{order.need_pay}}</text>
					</view>
				</view>

				<view class="row">
					<view class="btn" @click="submitOrderClick">
						提交订单
					</view>
				</view>
			</view>
		</view>


		<!-- 设置发票 -->
		<up-popup v-model:show="showModalInvoice" closeable="true" :round="10">
			<view class="settingInvoice">
				<text class="labels">发票信息</text>
				<view class="from">
					<view class="col">
						<text class="label">发票抬头：</text>
						<view class="rightLabel">
							<view @click="checkType('1')" class="check1" :class="addressForm.type=='1'?'active':''">个人
							</view>
							<view @click="checkType('2')" class="check2" :class="addressForm.type=='2'?'active':''">单位
							</view>
						</view>

					</view>


					<view class="col" v-if="addressForm.type =='1'">
						<text class="label">个人名称：</text>
						<u--input v-model="addressForm.title1" placeholder="请输入个人名称" clearable maxlength="20"
							@blur="validateConsignee1"></u--input>
					</view>

					<view class="col" v-if="addressForm.type =='2'">
						<text class="label">单位名称：</text>
						<u--input v-model="addressForm.title2" placeholder="请输入单位名称" clearable maxlength="50"
							@blur="validateConsignee2"></u--input>
					</view>

					<view class="col" v-if="addressForm.type =='2'">
						<text class="label">纳税人识别号：</text>
						<u--input v-model="addressForm.credit" placeholder="请输入纳税人识别号" clearable maxlength="18"
							@blur="validateConsignee3"></u--input>
					</view>



					<view class="col">
						<text class="label">发票内容</text>
						<view class="rightLabel">
							<text class="val1">
								商品明细
							</text>
							<text class="val2">
								提示：发票内容将显示详细商品名称与价格信息
							</text>
						</view>
					</view>

					<view class="col">
						<text class="label">手机号码：</text>
						<view class="right">
							<u--input v-model="addressForm.mobile" placeholder="请输入手机号码" clearable maxlength="11"
								type="number" @blur="validateConsignee4"></u--input>
						</view>
					</view>
				</view>


				<view class="btn">
					<button @click="save_address">确定</button>
				</view>

			</view>
		</up-popup>

	</view>
</template>

<script setup>
	import {
		confirm,
		addressList,
		submitOrder,
		getInvoiceSave,
		invoiceSave
	} from '@/api/order.js'
	import {
		onLoad,
		onShow,
		onUnload,
		onReady,
		onReachBottom,
		onPullDownRefresh
	} from '@dcloudio/uni-app';
	import {
		ref,
		reactive,
		onMounted
	} from 'vue';
	// const showModal = ref(false) //备注填写
	const masker = ref('') //备注
	const params = ref({
		channel:4,
		buy: [], //直接购买参数
		token: '',
		source: '',
		address_id: 0, //地址id,不传使用默认地址  
		remarks: '', //备注,key=企业id,value=备注信息  
		send_type: 1, //配送方式,key=企业id,value=配送方式:1=商家配送,2=自提  
		pay_channel: 1, //支付方式,1=在线支付  
		invoice_type: '', //发票,默认0:0=不开票,1=个人,2=企业  
	})
	// const invoice_type = ref(0) //发票类型

	const checkAddressId = ref('') //选中的临时地址
	// 发票表单数据
	const addressForm = reactive({
		type: '1', // 默认选个人
		title1: '', // 个人名称
		title2: '', // 单位名称
		credit: '', // 纳税人识别号
		mobile: '',
	})

	const invoice_type = ref(0)//发票雷系
	const invoiceList = ref([]) //发票信息

	const showModalInvoice = ref(false) //设置发票


	const order = ref({}) //订单预览信息
	const addressListData = ref([]) //地址列表

	onShow(() => {
		const payParams = uni.getStorageSync('payParams');
		if (payParams) {
			// 设置参数
			params.value.token = payParams.token;
			params.value.source = payParams.source;
			if (payParams.buy) {
				let buy = JSON.parse(payParams.buy);
				params.value.buy = JSON.stringify(buy);
			}

			// 标记是否已经执行过外部的请求
			let hasTriggered = false;

			// 监听 refreshIfNeeded 事件
			uni.$on('refreshIfNeeded', function(dat, id) {
				if (dat && !hasTriggered) {
					checkAddressId.value = id
					params.value.address_id = id
					// console.log('1111111111', params.value.address_id);
					// queryOrderDetails(); // 订单预览
					// queryAddressList(); // 地址列表
					// addressDetails(); // 获取发票信息
					hasTriggered = true;
				}
				// 取消监听
				uni.$off('refreshIfNeeded');

			});
			if (!hasTriggered) {
				// console.log('222222222222222', checkAddressId.value);
				queryOrderDetails(); // 订单预览
				queryAddressList(); // 地址列表
				addressDetails(); // 获取发票信息
				hasTriggered = false; // 外部操作已触发
			}
		}
	});
	// 订单预览
	const queryOrderDetails = async () => {
		const res = await confirm(params.value);
		if (res.code === 1) {
			const _data = res.data
			// addressForm.type =_data.invoice_type
			// params.value.address_id = _data.address_id;
			// console.log('address_idaddress_idaddress_id',params.value.address_id)
			order.value = _data;

		} else {
			uni.navigateBack()
			uni.showToast({
				icon: 'none',
				title: res.msg
			})
		}
	}
	const invoicetype = ref('') //发票类型

	// 获取发票详情
	const addressDetails = async () => {
		const res = await getInvoiceSave();
		if (res.code === 1) {
			const _data = res.data.list;
			invoiceList.value = _data; // 修改为响应式更新
			if (_data && invoiceList.value.length > 0) {
				const [firstInvoice, secondInvoice] = invoiceList.value;
				addressForm.mobile = firstInvoice.mobile; // 更新 mobile

				const setAddressForm = (item) => {
					if (item.type === 1) {
						addressForm.type = '1'; // 更新类型
						addressForm.title1 = item.title; // 更新个人名称
						// console.log('addressForm', addressForm);
					} else if (item.type === 2) {
						addressForm.type = '2'; // 更新类型
						// console.log('addressForm222', addressForm);
						addressForm.title2 = item.title; // 更新单位名称
						addressForm.credit = item.credit; // 更新纳税人识别号
					}
					invoicetype.value = addressForm.type;
				};
				// 回显第一个和第二个数据
				setAddressForm(firstInvoice);
				if (secondInvoice) {
					setAddressForm(secondInvoice); // 如果有第二个数据则回显
				}
			}
		} else {
			uni.showToast({
				icon: 'none',
				title: res.msg
			});
		}
	};


	// 地址列表
	const queryAddressList = async () => {
		const res = await addressList();
		if (res.code === 1) {
			const _data = res.data;
			// 如果地址为空 清空默认的id
			if (_data.list.length === 0) {
				params.value.address_id = 0;
			} else {
				if (checkAddressId.value) {
					const selectedAddress = _data.list.find(item => item.id === checkAddressId.value);
					if (selectedAddress) {
						let arr = []
						arr.push(selectedAddress)
						params.value.address_id = selectedAddress.id;
						addressListData.value = arr;
					}
				} else {
					const defaultAddress = _data.list.filter(item => item.default === 1);
					addressListData.value = defaultAddress;
					params.value.address_id = defaultAddress[0].id;
				}
			}
			// console.log('最终的地址 ID', params.value.address_id);
		} else {
			uni.showToast({
				icon: 'none',
				title: res.msg
			});
		}
	};

	// 添加地址
	const addAddress = () => {
		uni.navigateTo({
			url: '/pages/order/address/index'
		})
	}


	// 设置发票
	const onInvalid = () => {
		addressForm.title1 = ''
		addressForm.title2 = ''
		addressForm.credit = ''
		addressDetails()
		showModalInvoice.value = true;
	}
	// 切换发票类型
	const checkType = (type) => {
		if (invoiceList.value.length === 0) {
			if(val === '1'){
				addressForm.title2 = ''; // 清空单位名称
				addressForm.credit = ''; // 清空纳税人识别号
			}else{
				addressForm.title1 = ''; // 清空个人名称
			}
		}
		addressForm.type = type; // 更新发票类型

	};


	// 保存发票
	// const save_address = async () => {
	//   refForm.value.validate(async (valid: boolean) => {
	//     if (!valid) return
	//     let county_name = {
	//       type: addressForm.type,
	//       title: addressForm.type == '1' ? addressForm.title1 : addressForm.title2,
	//       mobile: addressForm.mobile,
	//       credit: addressForm.type == '2' ? addressForm.credit : undefined,
	//     }
	
	//     const resp = await invoiceSave(county_name)
	//     if (resp.code === 1) {
	//       console.log('invoiceList.value.length', invoiceList.value.length)
	//       ElMessage.success(
	//         invoiceList.value.length === 0
	//           ? '新增发票信息成功'
	//           : '修改发票信息成功',
	//       )
	//       dialogInvoiceVisible.value = false
	//       emits('updataInvoice', resp.data.invoice_type)
	//     } else {
	//       ElMessage.warning(resp.msg)
	//     }
	//   })
	// }
	
	const save_address = async () => {
		if (addressForm.type == '1' || addressForm.type == 1) {
			// 校验个人名称
			if (!addressForm.title1) {
				uni.showToast({
					icon: 'none',
					title: '请输入个人名称',
				});
				return; // 如果个人名称为空，立即退出，不校验手机号
			} else {
				validateConsignee1(); // 个人名称校验
				if (addressForm.title1 === '') return; // 如果个人名称校验失败，退出
			}

			// 校验手机号
			if (!addressForm.mobile) {
				uni.showToast({
					icon: 'none',
					title: '请输入手机号',
				});
				return; // 如果手机号为空，立即退出
			} else {
				validateConsignee4(); // 手机号校验
				if (addressForm.mobile === '') return; // 如果手机号校验失败，退出
			}
			// 校验手机号
			if (!addressForm.mobile) {
				uni.showToast({
					icon: 'none',
					title: '请输入手机号',
				});
				return; // 如果手机号为空，立即退出
			} else {
				validateConsignee4(); // 手机号校验
				if (addressForm.mobile === '') return; // 如果手机号校验失败，退出
			}
			// return
		}
		// 单位类型发票校验（type === '2'）
		if (addressForm.type == '2' || addressForm.type == 2) {
			// 校验单位名称
			if (!addressForm.title2) {
				uni.showToast({
					icon: 'none',
					title: '请输入单位名称',
				});
				return; // 如果单位名称为空，立即退出
			} else {
				validateConsignee2(); // 单位名称校验
				if (addressForm.title2 === '') return; // 如果单位名称校验失败，退出
			}

			// 校验纳税人识别号
			if (!addressForm.credit) {
				uni.showToast({
					icon: 'none',
					title: '请输入纳税人识别号',
				});
				return; // 如果纳税人识别号为空，立即退出
			} else {
				validateConsignee3(); // 纳税人识别号校验
				if (addressForm.credit === '') return; // 如果纳税人识别号校验失败，退出
			}

			console.log('addressForm.credit', addressForm.credit)
			// 校验手机号
			if (!addressForm.mobile) {
				uni.showToast({
					icon: 'none',
					title: '请输入手机号',
				});
				return; // 如果手机号为空，立即退出
			} else {
				validateConsignee4(); // 手机号校验
				if (addressForm.mobile === '') return; // 如果手机号校验失败，退出
			}
			// return
		}
		let county_name = {
			type: addressForm.type,
			title: addressForm.type === '1' ? addressForm.title1 : addressForm.title2,
			mobile: addressForm.mobile,
			credit: addressForm.type === '2' ? addressForm.credit : undefined
		};
		const resp = await invoiceSave(county_name);
		if (resp.code === 1) {
			invoice_type.value =  resp.data.invoice_type
			console.log('invoiceList.value.length', invoiceList.value.length);
			uni.showToast({
				icon: 'none',
				title: invoiceList.length === 0 ? '新增发票信息成功' : '修改发票信息成功',
			});
			showModalInvoice.value = false;
			addressDetails() //发票详情
			// queryOrderDetails() // 订单预览
		} else {
			uni.showToast({
				icon: 'none',
				title: resp.msg,
			});
		}
	};



	// 校验收货人姓名（根据你的需求，调整此函数）
	const validateConsignee1 = () => {
		// 去除空格
		addressForm.title1 = addressForm.title1.replace(/\s+/g, '');
		const regex = /^[A-Za-z\u4e00-\u9fa5]{1,20}$/; // 允许字母和汉字
		if (!regex.test(addressForm.title1)) {
			uni.showToast({
				icon: 'none',
				title: '个人名称只能输入1到20个汉字或字母',
			});
		}
	};

	const validateConsignee2 = () => {
		addressForm.title2 = addressForm.title2.replace(/\s+/g, '');
		// 正则表达式允许输入1到50个汉字或字母（大小写）
		const regex = /^[\u4e00-\u9fa5A-Za-z]{1,50}$/;
		if (!regex.test(addressForm.title2)) {
			uni.showToast({
				icon: 'none',
				title: '单位名称只能输入1至50个汉字或字母',
			});
			// addressForm.title2 = ''; // 可以根据需要重置输入框
		}
	};


	const validateConsignee3 = () => {
		addressForm.credit = addressForm.credit.replace(/\s+/g, '');
		// 允许15到18位字母或数字的组合
		const regex = /^[A-Za-z0-9]{15,18}$/;
		if (!regex.test(addressForm.credit)) {
			uni.showToast({
				icon: 'none',
				title: '纳税人识别号格式不正确',
			});
			// addressForm.credit = ''; // 重置输入框
		}
	};

	const validateConsignee4 = () => {
		addressForm.mobile = addressForm.mobile.replace(/\s+/g, '');
		// 正则表达式：校验11位数字（符合手机号格式）
		const regex = /^[0-9]{11}$/;
		if (!regex.test(addressForm.mobile)) { // 使用 addressForm.mobile 来校验手机号
			uni.showToast({
				icon: 'none',
				title: '手机号格式不正确',
			});
			// addressForm.mobile = ''; // 如果需要，清空手机号输入框
		}
	};



	// 备注
	// const Masker = () => {

	// 	showModal.value = true;
	// }
	// 保存备注
	// const saveMasker = () => {
	// 	showModal.value = false;
	// }

	// 提交订单 去收银台
	const submitOrderClick = async () => {
	
		params.value.invoice_type = invoicetype.value; // 更新 invoice_type
		if (params.value.address_id == 0) {
			uni.showToast({
				icon: 'none',
				title: '请选择地址'
			});
			return
		}
		console.log('params.value', params.value)
		try {
			const res = await submitOrder(params.value);
			if (res.code === 1) {
				// 零元购买
				if (res.data.order.pay_status == 1) {
					uni.showToast({
						icon: 'none',
						title: '购买成功',
						success: () => {
							setTimeout(() => {
									uni.redirectTo({
										url: '/pages/common/success/index'
									})
							}, 500);
						}
					});
					return
				} else {
					uni.showToast({
						icon: 'none',
						title: '订单提交成功',
						success: () => {
							setTimeout(() => {
								if (res.data.order.order_id) {
									const navigateUrl =
										`/pages/order/cashierCounter/index?order_id=${res.data.order.order_id}`;
									// uni.navigateTo({
									// 	url: navigateUrl
									// });
									uni.redirectTo({
										url: navigateUrl
									})
								}
							}, 500);
						}
					});
				}

			} else {
				uni.showToast({
					icon: 'none',
					title: res.msg
				});
			}
		} catch (error) {
			uni.showToast({
				icon: 'none',
				title: '系统错误，请稍后再试'
			});
			console.error('提交订单时发生错误:', error);
		}
	};
</script>

<style lang="scss" scoped>
	.order {
		min-height: 100vh;
		padding-top: 20rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
		padding-bottom: calc(150rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(150rpx + env(safe-area-inset-bottom));
		box-sizing: border-box;

		.card {
			// min-height: 170rpx;
			background: #FFFFFF;
			padding: 25rpx;
			border-radius: 18rpx;
			box-sizing: border-box;
			margin-bottom: 20rpx;
			// box-shadow: 0 5rpx 8rpx 0 rgba(0, 0, 0, .08);
		}

		.address {
			.label {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #333333;
				line-height: 40rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
				display: block;
			}

			.isNullAddress {
				align-items: center;
				justify-content: space-between;
				padding: 20rpx 0;
				box-sizing: border-box;

				text {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 26rpx;
					color: #D5A969;
					line-height: 36rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
				}

				image {
					width: 12rpx;
					height: 20rpx;
					opacity: 0.8;
				}
			}

			.AddressList {
				.left {
					flex: 1;

					.block {
						display: block;
					}

					.label1 {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 26rpx;
						color: #333333;
						line-height: 40rpx;
						text-align: left;
						font-style: normal;
						text-transform: none;
					}

					.label2 {
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 32rpx;
						color: #333333;
						line-height: 36rpx;
						text-align: left;
						font-style: normal;
						text-transform: none;
						margin: 15rpx 0;
					}

					.label3 {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 26rpx;
						color: #333333;
						line-height: 40rpx;
						text-align: left;
						font-style: normal;
						text-transform: none;
					}

				}

				.right {
					display: flex;
					align-items: center;
					justify-content: flex-end;
					width: 100rpx;

					image {
						width: 12rpx;
						height: 20rpx;
						opacity: 0.8;
					}
				}
			}
		}

		.merchant {
			flex-wrap: wrap;

			.title {
				height: 36rpx;
				align-items: center;

				.icon {
					width: 25rpx;
					height: 25rpx;
					margin-right: 10rpx;
				}

				.right {
					width: calc(100% - 35rpx);
					display: flex;
					align-items: center;

					.label {
						font-family: Source Han Sans CN, Source Han Sans CN;
						font-weight: 500;
						font-size: 28rpx;
						color: #333333;
						line-height: 36rpx;
						text-align: left;
						font-style: normal;
						text-transform: none;
					}

					.tag {
						margin-left: 10rpx;
						width: 12rpx;
						height: 20rpx;
					}
				}
			}

			.goodsInfo {
				margin: 25rpx 0 40rpx;

				.cover {
					width: 150rpx;
					height: 150rpx;
					border-radius: 10rpx;
					margin-right: 20rpx;
					overflow: hidden;
				}

				.right {
					width: calc(100% - 170rpx);
					flex-wrap: wrap;

					.title {
						margin-bottom: 10rpx;
						width: 100%;
						justify-content: space-between;

						.name {
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 28rpx;
							color: #333333;
							line-height: 40rpx;
							text-align: left;
							font-style: normal;
							text-transform: none;
						}

						.monery {
							display: flex;
							align-items: center;
							margin-left: 20rpx;
							font-family: Source Han Sans CN, Source Han Sans CN;
							font-weight: 500;
							font-size: 26rpx;
							color: #333333;
							line-height: 36rpx;
							text-align: left;
							font-style: normal;
							text-transform: none;
						}
					}

					.size {
						margin-bottom: 15rpx;
						align-items: center;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #999999;
						line-height: 36rpx;
						text-align: left;
						font-style: normal;
						text-transform: none;
					}

					.stock {
						width: 100%;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #ef4040;
						height: 26rpx;
						line-height: 26rpx;
						margin-top: 15rpx;
						text-align: left;
						font-style: normal;
						text-transform: none;
					}
					.bottom{
						display: flex;
						.leftRow{
							width: calc(100% - 50rpx);
							padding-right: 10rpx;
							box-sizing: border-box;
							display: flex;
							align-items: center;
							
							
							.monery1 {
								// width: calc(100% - 160rpx);
								width: 100%;
								display: flex;
								align-items: center;
							
								.col1 {
									// width: 100%;
									display: flex;
							
									.price {
										font-family: PingFang SC, PingFang SC;
										font-weight: 500;
										font-size: 34rpx;
										color: #DF3033;
										line-height: 36rpx;
										font-style: normal;
										text-transform: none;
										display: -webkit-box;
										-webkit-box-orient: vertical;
										-webkit-line-clamp: 1;
										overflow: hidden;
									}
							
									.pricetype {
										min-width: 70rpx;
										flex: 1;
										font-family: PingFang SC, PingFang SC;
										font-weight: 400;
										font-size: 24rpx;
										color: #DF3033;
										line-height: 36rpx;
										text-align: left;
										font-style: normal;
										text-transform: none;
										margin-left: 5rpx;
									}
								}
							
								.price2 {
									margin-left: 10rpx;
									font-family: PingFang SC, PingFang SC;
									font-weight: 400;
									font-size: 24rpx;
									color: #8E8E8E;
									line-height: 36rpx;
									text-align: left;
									font-style: normal;
									text-decoration-line: line-through;
									text-transform: none;
								}
							}
							
							.monery {
								font-family: Source Han Sans CN, Source Han Sans CN;
								font-weight: 500;
								font-size: 30rpx;
								color: #333333;
								line-height: 36rpx;
								text-align: left;
								font-style: normal;
								text-transform: none;
							}
							
						}
						
						.number {
							width: 50rpx;
							justify-content: flex-end;
							align-items: center;
							
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #999999;
							line-height: 36rpx;
							text-align: center;
							font-style: normal;
							text-transform: none;
							
						
						}
					}
					
				}
			}


			.menu {
				align-items: center;
				margin-bottom: 30rpx;

				&:last-child {
					margin-bottom: 0;
				}

				.leftLabel {
					width: 100rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #333333;
					text-align: left;
					font-style: normal;
					text-transform: none;
				}

				.right {
					width: calc(100% - 100rpx);
					align-items: center;

					.titles {
						flex: 1;
						flex-wrap: wrap;

						.delivery {
							text-align: right;
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							font-size: 24rpx;
							color: #333333;
							font-style: normal;
							text-transform: none;
						}

						.date {
							text-align: right;
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							font-size: 24rpx;
							color: #333333;
							font-style: normal;
							text-transform: none;
						}

						.tips {
							display: block;
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #999999;
							line-height: 30rpx;
							text-align: right;
							font-style: normal;
							text-transform: none;
						}
					}

					.tag {
						padding-left: 20rpx;
						width: 12rpx;
						height: 20rpx;
					}

				}
			}
		}

		// 发票信息
		.invoice {
			align-items: center;
			margin-bottom: 30rpx;


			&:last-child {
				margin-bottom: 0;
			}


			.leftLabel {
				display: block;
				width: 170rpx;
				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: 400;
				font-size: 28rpx;
				color: #333333;
				line-height: 36rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
			}

			.right {
				width: calc(100% - 150rpx);
				align-items: center;
				justify-content: flex-end;

				.tag {
					padding-left: 20rpx;
					width: 12rpx;
					height: 20rpx;
				}

				.titles {
					flex: 1;
					flex-wrap: wrap;

					.monery {
						justify-content: flex-end;
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 24rpx;
						color: #333333;
						font-style: normal;
						text-transform: none;
					}
				}
			}
		}

		// 订单信息
		.orderInfo {
			align-items: center;
			flex-wrap: wrap;
			margin-bottom: 30rpx;
			padding: 25rpx 25rpx 10rpx;
			box-sizing: box-sizing ;

			&:last-child {
				margin-bottom: 0;
			}

			.menu {
				align-items: center;
				margin-bottom: 30rpx;

				&:last-child {
					margin-bottom: 0;
				}

				.leftLabel1 {
					width: 120rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 600;
					font-size: 28rpx;
					color: #333333;
					text-align: left;
					font-style: normal;
					text-transform: none;
					
				}



				.leftLabel {
					width: 120rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #333333;
					text-align: left;
					font-style: normal;
					text-transform: none;
				}

				.right {
					width: calc(100% - 120rpx);
					align-items: center;

					.titles {
						flex: 1;
						flex-wrap: wrap;

						.monery1 {
							justify-content: flex-end;
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							font-size: 30rpx;
							color: #333333;
							line-height: 36rpx;
							text-align: right;
							font-style: normal;
							text-transform: none;
						}

						.monery {
							justify-content: flex-end;
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							font-size: 28rpx;
							color: #DF3033;
							line-height: 36rpx;
							text-align: left;
							font-style: normal;
							text-transform: none;

						}

					}
				}

				.total {
					flex: 1;
					justify-content: flex-end;
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: bold;
					font-size: 28rpx;
					color: #333333;
					line-height: 36rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
				}

				.totalMonery {
					justify-content: flex-end;
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					font-size: 24rpx;
					color: #333333;
					font-style: normal;
					text-transform: none;
				}
			}
			
			.totalRow{
				height: 80rpx;
				display: flex;
				justify-content: space-between;
				border-top: 1rpx solid #E6E6E6;
				.rows{
					display: flex;
					.total{
						font-family: PingFang SC, PingFang SC;
						font-weight: bold;
						font-size: 28rpx;
						color: #333333;
						line-height: 36rpx;
						text-align: left;
						font-style: normal;
						text-transform: none;
					}
					.totalMonery{
						font-family: PingFang SC, PingFang SC;
						font-weight: bold;
						font-size: 28rpx;
						color: #DF3033;
						line-height: 36rpx;
						text-align: left;
						font-style: normal;
						text-transform: none;
					}
				}
				
			}


		}

		// 备注
		.maskerRow {
			padding: 10rpx 30rpx;
			box-sizing: border-box;

			.label {
				display: block;
				width: 100%;
				font-size: 30rpx;
				font-weight: 700;
				line-height: 80rpx;
				height: 80rpx;
				box-sizing: border-box;
			}

			::v-deep .u-textarea {
				width: 100%;
				// border: none !important;
				margin-bottom: 20rpx;
				box-sizing: border-box;
			}

			.btn {
				width: 100%;
				padding: 0 30rpx;
				display: flex;
				justify-content: center;
				box-sizing: border-box;
				margin-top: 40rpx;

				button {
					width: 100%;
					height: 88rpx;
					background: linear-gradient(138deg, #EDA55B 0%, #D09A47 100%);
					border-radius: 14rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 32rpx;
					color: #FFFFFF;
					line-height: 88rpx;
					font-style: normal;
				}

			}

		}

		// 设置发票
		.settingInvoice {
			padding: 10rpx 30rpx;
			box-sizing: border-box;
			
			// background-image: url(https://zzt-pub.oss-cn-wuhan-lr.aliyuncs.com/clientImg/telBj%402x.png);
			// background-repeat: no-repeat;
			// background-size: 100%;

			.labels {
				display: block;
				width: 100%;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 34rpx;
				color: #2F2F2F;
				text-align: left;
				font-style: normal;
				text-transform: none;
				line-height: 80rpx;
				height: 80rpx;
				box-sizing: border-box;
			}


			.from {
				width: 100%;
				display: flex;
				flex-wrap: wrap;
				padding: 30rpx 0;
				box-sizing: border-box;

				.col {
					width: 100%;
					// height: 70rpx;
					display: flex;
					align-items: flex-start;
					margin-bottom: 30rpx;

					.label {
						width: 200rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						height: 100%;
						font-size: 28rpx;
						color: #333333;
						display: flex;
						align-items: flex-start;
						text-align: left;
						font-style: normal;
						padding-top: 7rpx;
						box-sizing: border-box;
					}

					.rightLabel {
						flex: 1;
						height: 100%;
						display: flex;
						flex-wrap: wrap;
						justify-content: space-between;

						.check1 {
							color: #666666;
							height: 66rpx;
							line-height: 66rpx;
							background: #F0F0F0 !important;
							border-radius: 8rpx 8rpx 8rpx 8rpx;
							width: 45%;
							font-family: Source Han Sans CN, Source Han Sans CN;
							font-weight: 400;
							font-size: 26rpx;
							text-align: center;
						}

						.check2 {
							height: 66rpx;
							line-height: 66rpx;
							background: #F0F0F0 !important;
							border-radius: 8rpx 8rpx 8rpx 8rpx;
							width: 45%;
							font-family: Source Han Sans CN, Source Han Sans CN;
							font-weight: 400;
							font-size: 26rpx;
							// background: linear-gradient( 115deg, #F2BD6F 0%, #CCA05F 100%);
							color: #666666;
							text-align: center;
						}

						.active {
							background: linear-gradient(115deg, #F2BD6F 0%, #CCA05F 100%) !important;
							color: #FFF !important;
						}

						.val1 {
							width: 100%;
							display: block;
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 30rpx;
							color: #2F2F2F;
							line-height: 45rpx;
							text-align: left;
							font-style: normal;
							text-transform: none;
							margin-bottom: 10rpx;
						}

						.val2 {
							width: 100%;
							display: block;

							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 26rpx;
							color: #A1A1A1;
							line-height: 40rpx;
							text-align: left;
							font-style: normal;
							text-transform: none;
						}
					}

					.right {
						flex: 1;
						height: 100%;
						display: flex;

						.getPhoneCode {
							padding-left: 20rpx;
							display: flex;
							align-items: center;
							width: 150rpx;
							height: 100%;
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 28rpx;
							color: #333;
							font-style: normal;
						}

						.time {
							padding-left: 20rpx;
							display: flex;
							align-items: center;
							width: 150rpx;
							height: 100%;
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 28rpx;
							color: #CCA05F;
							font-style: normal;
						}
					}

					.val {
						flex: 1;
					}
				}
			}

			.btn {
				width: 100%;
				padding: 0 30rpx;
				display: flex;
				justify-content: center;
				box-sizing: border-box;
				margin-top: 40rpx;

				button {
					width: 100%;
					height: 88rpx;
					background: linear-gradient(138deg, #EDA55B 0%, #D09A47 100%);
					border-radius: 14rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 32rpx;
					color: #FFFFFF;
					line-height: 88rpx;
					font-style: normal;
				}

			}

		}

		.bottomFexBtn {
			position: fixed;
			left: 0;
			bottom: 0;
			z-index: 5;
			padding-bottom: env(safe-area-inset-bottom);
			padding-bottom: constant(safe-area-inset-bottom);
			height: calc(120rpx + env(safe-area-inset-bottom));
			height: calc(120rpx + constant(safe-area-inset-bottom));
			width: 100%;
			// background-color: #000000 !important;
			backdrop-filter: blur(10px) !important;
			background-color: rgba(255, 255, 255, .82) !important;
			box-shadow: 0rpx -4rpx 6rpx 0rpx rgba(0, 0, 0, 0.05);
			box-sizing: border-box;
			display: flex;
			align-items: flex-start;

			.rowConter {
				padding: 15rpx 25rpx;
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.row {
					display: flex;
					justify-content: center;
					align-items: center;

					.price {
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 40rpx;
						color: #F2270C;
						line-height: 34rpx;
						text-align: left;
						font-style: normal;
						text-transform: none;

					}

					.btn {
						width: 220rpx;
						height: 80rpx;
						background: linear-gradient(113deg, #F2BD6F 0%, #CCA05F 100%);
						border-radius: 20rpx;
						font-family: Source Han Sans CN, Source Han Sans CN;
						font-weight: 500;
						font-size: 32rpx;
						color: #FFFFFF;
						line-height: 80rpx;
						text-align: center;
						font-style: normal;
						text-transform: none;
					}


				}
			}
		}

	}
</style>